<div class="city-edit">
    <h1>{{title}}</h1>

    <p *ngIf="this.id && !city"><em>Loading...</em></p>

    <div class="form" [formGroup]="form" (ngSubmit)="onSubmit()">

        <div *ngIf="form.invalid && form.errors?.isDupeCity"
             class="alert alert-danger">
              <strong>ERROR</strong>:
              A city with the same <i>name</i>, <i>lat</i>,
              <i>lon</i> and <i>country</i> already exists.
        </div>
      
        <div class="form-group">
            <label for="name">City name:</label>
            <br />
            <input type="text" id="name"
                formControlName="name" required
                placeholder="City name..."
                class="form-control"
                />

            <div *ngIf="hasError('name')"
                 class="invalid-feedback">
                <div *ngIf="form.get('name').errors?.required">
                  Name is required.
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="lat">City latitude:</label>
            <br />
            <input type="text" id="lat"
                   formControlName="lat" required
                   placeholder="Latitude..."
                   class="form-control" />

            <div *ngIf="hasError('lat')"
                  class="invalid-feedback">
                <div *ngIf="form.get('lat').errors?.required">
                  Latitude is required.
                </div>
                <div *ngIf="form.get('lat').errors?.pattern">
                  Latitude requires a positive or negative number with 0-4 decimal values.
                </div>
            </div>
        </div>


        <div class="form-group">
            <label for="lon">City longitude:</label>
            <br />
            <input type="text" id="lon"
                   formControlName="lon" required
                   placeholder="Latitude..."
                   class="form-control" />

            <div *ngIf="hasError('lon')"
                 class="invalid-feedback">
                <div *ngIf="form.get('lon').errors?.required">
                  Longitude is required.
                </div>
                <div *ngIf="form.get('lon').errors?.pattern">
                  Longitude requires a positive or negative number with 0-4 decimal values.
                </div>
            </div>
        </div>
      
        <div class="form-group">
            <label for="countryId">Country:</label>
            <br />
            <mat-form-field *ngIf="countries">
              <mat-label>Select a Country...</mat-label>
              <mat-select id="countryId" formControlName="countryId">
                <mat-option *ngFor="let country of countries" [value]="country.id">
                  {{country.name}}
                </mat-option>
              </mat-select>
            </mat-form-field>

            <div *ngIf="hasError('countryId')"
                 class="invalid-feedback">
                <div *ngIf="form.get('countryId').errors?.required">
                  Please select a Country.
                </div>
            </div>
        </div>

        <div class="form-group commands">
            <button *ngIf="id" type="submit"
                    (click)="onSubmit()"
                    [disabled]="form.invalid"
                    class="btn btn-success">
                Save
            </button>
            <button *ngIf="!id" type="submit"
                    (click)="onSubmit()"
                    [disabled]="form.invalid"
                    class="btn btn-success">
                Create
            </button>
            <button type="button"
                    [routerLink]="['/cities']"
                    class="btn">
                Cancel
            </button>
        </div>
    </div>
</div>
